<template>
	<view class="container">
		
		<view class="reportView">
			<uni-row class="uni-row">
				<uni-col>
					<text class="title">用户名称：</text>
					<view class="input-item flex align-center">
					  <input placeholder="请输入用户名称" placeholder-class="place" v-model="FormData.nickname" class="input" type="text"  maxlength="30" />
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="uni-row">
				<uni-col>
					<text class="title">登陆账号：</text>
					<view class="input-item flex align-center">
					  <input placeholder="请设置登陆账号" placeholder-class="place" v-model="FormData.username" class="input" type="text"  maxlength="30" />
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="uni-row">
				<uni-col>
					<text class="title">登陆密码：</text>
					<view class="input-item flex align-center">
					  <input placeholder="请设置登陆密码" placeholder-class="place" v-model="FormData.password" class="input" type="password"  maxlength="30" />
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="uni-row">
				<uni-col>
					<text class="title">手机号码：</text>
					<view class="input-item flex align-center">
					  <input placeholder="请输入手机号码" placeholder-class="place" v-model="FormData.mobile" class="input" type="text"  maxlength="30" />
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="uni-row">
				<uni-col :span="11" >
					<text class="title">分配角色：</text>
					<view class="input-item flex align-center">
					  <uni-data-select
					  placeholder="请选择分类"
					  placeholder-class="place"
					    v-model="FormData.type"
					    :localdata="range"
					  ></uni-data-select>
					</view>
				</uni-col>
				<uni-col :span="11" :offset="2">
					<text class="title">归属机构：</text>
					<view class="input-item flex align-center">
						<uni-data-picker class="picker" placeholder="请选择上级机构" :map="map" popup-title="请选择归属机构" :localdata="deptList" v-model="FormData.deptId" @nodeclick="onnodeclick">
						</uni-data-picker>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="submit-view">
			<button class='submit'  @tap="clickBtn">保存</button>
		</view>
	</view>
</template>
<script>
	import { getUserById,} from '@/api/system/user.js'
	import {getDeptSimple} from '@/api/system/system.js'
	export default{
		data(){
			return{
				id:null,
				range:[{
					text:'公有',
					value:0
				},{
					text:'私有',
					value:1
				}],
				range2:[{
					text:'是',
					value:0
				},{
					text:'否',
					value:1
				}],
				FormData:{
					
				},
				deptList:[],
				map:{
					text:'name',
					value:'id'
				},
				
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getData()
		},
		methods:{

			getData(){
				if(this.id != null){
					let data={
						id:this.id
					}
					getUserById(data).then(res=>{
						this.FormData = res.data
					})
				}
				
				getDeptSimple().then(res=>{
					this.deptList=this.handleTree(res.data,'id');
				})
				
			},
			clickBtn(){
				updateCate(this.FormData).then(res=>{
					if(res.data === true){
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
			onnodeclick(e) {
				this.FormData.deptId = e.id;
			},
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #fff;
		height:100vh;
		.reportView{
			width: calc(100% - 80rpx);
			margin: 0 auto;
			.title{
				font-size: 14px;
				font-family: Inter-Bold, Inter;
				font-weight: bold;
				color: #000000;
				line-height: 40px;
				margin-left: 10px;
			}
			.input-item{
				background-color: #ffffff;
				height: 50px;
				border-radius: 10px;
				opacity: 1;
				border: 1px solid #508CFF;
				padding-left: 10px;
				
				/deep/ .uni-select{
					border: none;
					border-bottom: none;
					padding-left: 0;
				}
				.picker{
					overflow: hidden;
					/deep/ .input-value-border{
						border: none;
						box-shadow: none;
					}
					/deep/ .selected-list{
						width: 230px;
						overflow: hidden;
					}
				}
				.place{
					font-size: 12px;
				}
			}
			.uni-row{
				margin-bottom: 20px;
			}
			
		}
		.submit{
			margin-top: 40px;
			color: #fff;
			width: 100px;
			height: 30px;
			font-size: 14px;
			line-height: 30px;
			background: #508CFF;
			border-radius: 5px 5px 5px 5px;
		}
	}
</style>